<template>
	<view class="content" :style="{ height: windowHeight + 'px' }">
		<view class="header">
			<image :src="dataDetail.image" mode="widthFix" class="image"></image>
			<view class="header_conent">
				<view class="name">{{ dataDetail.name }}</view>
				<view class="price_content">
					<view class="price">￥{{ dataDetail.price }}</view>
					<view class="point">积分折扣{{ dataDetail.point }}</view>
					<view class="salesQuantity">已售 {{ dataDetail.salesQuantity || 0 }}</view>
				</view>
				<view class="des_content">
					<view class="des_content_items">
						<view class="label">品牌：</view>
						<view class="value">{{ dataDetail.brand }}</view>
					</view>
					<view class="des_content_items">
						<view class="label">型号：</view>
						<view class="value">{{ dataDetail.model }}</view>
					</view>
					<view class="des_content_items">
						<view class="label">外观：</view>
						<view class="value">{{ dataDetail.appearance }}</view>
					</view>
					<view class="des_content_items">
						<view class="label">分类：</view>
						<view class="value">{{ dataDetail.type }}</view>
					</view>
					<view class="des_content_items">
						<view class="label">生产：</view>
						<view class="value">{{ dataDetail.manufacturer }}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="info">
			<view class="info_header">
				<img src="https://dujiaojing.oss-cn-huhehaote.aliyuncs.com/uploads/2025/5/23/1747983666560_335f35e9/4.png?x-oss-process=image/resize,w_300"
					alt="">
				<view class="info_title">商品详情</view>
			</view>
			<view class="introduce_content ql-editor">
				<u-parse :content="dataDetail.content"></u-parse>
			</view>
		</view>
		<view class="info product">
			<view class="info_header">
				<img src="https://dujiaojing.oss-cn-huhehaote.aliyuncs.com/uploads/2025/5/23/1747983666560_335f35e9/4.png?x-oss-process=image/resize,w_300"
					alt="">
				<view class="info_title">更多商品</view>
			</view>
			<scroll-view @scrolltolower="lowerBottom" class="box_scroll" scroll-y="true" refresher-enabled="true"
				:refresher-triggered="triggered" :refresher-threshold="50" refresher-background="#f8f8f8"
				@refresherrefresh="onRefresh" @refresherrestore="onRestore">

				<view class="recommend_content_all">
					<view class="bottoms_items" v-for="(item, index) in list" :key="index" @click="toClick(item.id)">
						<image :src="item.image" mode="widthFix"></image>
						<view class="name">
							{{ item.name }}
						</view>
						<view class="bottom">
							<view class="price">
								{{ item.price }}
							</view>
							<view class="des">
								<view class="title"
									:style="{ backgroundColor: item.price == '0.00' ? 'rgba(55,147,245)' : 'red' }">
									{{ item.price == '0.00' ? '积分兑换' : '积分折扣' }}
								</view>
								<view class="salesQuantity">
									已拼{{ item.salesQuantity || 0 }}单
								</view>
							</view>
						</view>
					</view>
				</view>

				<view class="zanwu" v-if="list.length == 0">暂无数据</view>
				<u-loadmore v-if="list.length != 0" fontSize="25" :status="status" />
			</scroll-view>
		</view>

		<view class="bottoms">
			<view class="image">
				<image :src="item ? item : ''" v-for="(item, index) in avatarImageList" :key="index" alt="">
				</image>
			</view>
			<view class="bottom_title" @click="qianggou">立即抢购</view>
		</view>

	</view>
</template>

<script>
	import config from '@/config/config.js'
	import {
		systemInfo,
	} from '../../utils/mixin'
	import {
		mallProductList,
		getMallProduct,
		buyGoods,
		decodeOpenid,
		payOrder
	} from '@/api/index.js'
	export default {
		components: {},
		mixins: [systemInfo],
		data() {
			return {
				list: [],
				queryParams: {
					pageNum: 1,
					pageSize: 10,
				},
				status: 'loadmore',
				triggered: false,
				downRefresh: false,
				pageCount: 0,
				id: '',
				dataDetail: {},
				avatarImageList: [],
			}
		},
		async onLoad(options) {
			// 状态栏高度
			this.getSystemInfo();


			this.id = options.id
			this.getDetail()

			this.triggered = true;
			this.downRefresh = true
			this.queryParams.pageNum = 1
			this.list = []
			this.getcollectList()
		},
		methods: {
			// 抢购
			async qianggou() {
				uni.navigateTo({
					url: "/subpackage3/qianggou/qianggou?productId=" + this.dataDetail.id
				})


				
			},
			toClick(id) {
				uni.navigateTo({
					url: "/subpackage3/shop/productDetail?id=" + id
				})
			},
			async getDetail() {
				const res = await getMallProduct(this.id)
				res.data.image = config.pic_prefixs + res.data.image
				this.avatarImageList = []
				if (res.data.avatarImageList) {
					res.data.avatarImageList.forEach(item => {
						this.avatarImageList.push(config.pic_prefix + item)
					})
				}
				this.dataDetail = res.data
			},

			async getcollectList() {
				const res = await mallProductList({
					...this.queryParams,
				})
				this.pageCount = res.total
				res.rows.forEach(element => {
					element.image = config.pic_prefixs + element.image
				});
				//停止加载中
				this.triggered = false;
				this.downRefresh = false
				//处理完逻辑停止刷新
				uni.stopPullDownRefresh();
				if (this.list.length >= this.pageCount) {
					this.status = 'nomore';
				} else {
					let arr = [...this.list, ...res.rows]
					this.list = arr
					if (res.rows.length < 10) {
						this.status = 'nomore';
					}
				}
			},

			//触底加载
			lowerBottom() {
				if (this.queryParams.pageNum < this.pageCount) {
					if (!this.downRefresh) {
						this.downRefresh = true
						this.status = 'loading';
						this.queryParams.pageNum += 1
						this.getcollectList()
					}
				}
			},
			onRefresh() {
				this.triggered = true;
				this.downRefresh = true
				this.queryParams.pageNum = 1
				this.list = []
				this.getcollectList()
			},
			onRestore() {
				this.triggered = false; // 需要重置
			},
		}
	}
</script>

<style lang="less" scoped>
	.content {
		background-color: rgb(245, 245, 245);
		width: 100%;
		box-sizing: border-box;
		text-align: center;


		.header {
			// height: 550rpx;
			width: 100%;
			background-color: #fff;

			.image {
				width: 100%;
				// height: 300rpx;
			}

			.header_conent {
				width: 100%;
				box-sizing: border-box;
				padding: 20px;

				.name {
					font-size: 30rpx;
					width: 100%;
					text-align: left;
					overflow: hidden; // 溢出的内容隐藏
					text-overflow: ellipsis; // 溢出的部分用省略号...显示
					-webkit-line-clamp: 2; // 行数
					display: -webkit-box; // 将对象作为弹性伸缩盒子模型显示 
					-webkit-box-orient: vertical; // 设置或检索伸缩盒对象的子元素的排列方式
				}

				.price_content {
					margin-top: 10px;
					display: flex;
					align-items: flex-end;

					.price {
						font-size: 40rpx;
						color: red;
					}

					.point {
						font-size: 24rpx;
						color: #b3adad;
						margin-left: 10px;
					}

					.salesQuantity {
						flex: 1;
						text-align: right;
						font-size: 24rpx;
						color: #b3adad;
					}
				}

				.des_content {
					margin-top: 10px;
					display: flex;
					align-items: center;
					justify-content: space-between;
					flex-wrap: wrap;

					.des_content_items {
						width: 50%;
						text-align: left;
						font-size: 24rpx;
						display: flex;
						align-items: center;
						margin-bottom: 10px;

						.label {
							color: #000;
						}

						.value {
							color: #b3adad;
							flex: 1;
						}
					}

				}
			}
		}

		.info {
			width: 100%;
			background-color: #fff;
			padding: 20px;
			box-sizing: border-box;
			text-align: left;
			margin-top: 20px;

			.info_header {
				width: 100%;
				display: flex;
				align-items: center;
				border-bottom: 1px solid #eee;
				box-sizing: border-box;
				padding-bottom: 10rpx;

				img {
					width: 24rpx;
					height: 30rpx;
				}

				.info_title {
					font-size: 30rpx;
					box-sizing: border-box;
					margin-left: 10rpx;
				}
			}

			.introduce_content {
				font-size: 24rpx;
				color: rgb(179, 173, 173);
				line-height: 2;
				text-align: left;
				margin: 20rpx 0;
				letter-spacing: 2;
			}
		}

		.bottoms {
			width: 100%;
			height: 60px;
			background-color: red;
			display: flex;
			align-items: center;
			color: #fff;
			font-size: 30px;
			justify-content: center;
			position: fixed;
			bottom: 0;

			.image {
				height: 40px;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-right: 20px;


				image {
					width: 70rpx;
					height: 70rpx;
					border-radius: 50%;
					margin-left: -20rpx;
				}
			}
		}

		.box_scroll {
			height: 1000rpx;
			width: 100%;
			box-sizing: border-box;

			.recommend_content_all {
				width: 100%;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;

				.bottoms_items {
					width: calc(50% - 20rpx);
					margin-bottom: 20rpx;

					image {
						width: 100%;
					}

					.name {
						width: 100%;
						text-align: left;
						font-size: 30rpx;
						overflow: hidden; // 溢出的内容隐藏
						text-overflow: ellipsis; // 溢出的部分用省略号...显示
						-webkit-line-clamp: 2; // 行数
						display: -webkit-box; // 将对象作为弹性伸缩盒子模型显示 
						-webkit-box-orient: vertical; // 设置或检索伸缩盒对象的子元素的排列方式
					}

					.bottom {
						width: 100%;
						display: flex;
						align-items: center;
						justify-content: space-between;

						.price {
							font-size: 30rpx;
							color: red;
						}

						.des {
							display: flex;
							align-items: center;
							font-size: 20rpx;
							color: #fff;
							height: 40rpx;
							line-height: 40rpx;

							.title {
								text-align: center;
								padding: 0 5rpx;
								border-top-left-radius: 10rpx;
								border-bottom-left-radius: 10rpx;
							}

							.salesQuantity {
								color: #b3adad;
								text-align: center;
								padding: 0 5rpx;
								background-color: rgba(235, 235, 235);
								border-top-right-radius: 10rpx;
								border-bottom-right-radius: 10rpx;
							}
						}
					}

					.zanwu {
						font-size: 30rpx;
						color: #b3adad;
						text-align: center;
						margin-top: 20px;

					}
				}
			}
		}






		.ql-container {
			box-sizing: border-box;
			font-family: Helvetica, Arial, sans-serif;
			font-size: 13px;
			height: 100%;
			margin: 0px;
			position: relative;
		}

		.ql-container.ql-disabled .ql-tooltip {
			visibility: hidden;
		}

		.ql-container.ql-disabled .ql-editor ul[data-checked]>li::before {
			pointer-events: none;
		}

		.ql-clipboard {
			left: -100000px;
			height: 1px;
			overflow-y: hidden;
			position: absolute;
			top: 50%;
		}

		.ql-clipboard p {
			margin: 0;
			padding: 0;
		}

		.ql-editor {
			box-sizing: border-box;
			line-height: 1.42;
			height: 100%;
			outline: none;
			overflow-y: auto;
			padding: 12px 15px;
			tab-size: 4;
			-moz-tab-size: 4;
			text-align: left;
			white-space: pre-wrap;
			word-wrap: break-word;
		}

		.ql-editor>* {
			cursor: text;
		}

		.ql-editor p,
		.ql-editor ol,
		.ql-editor ul,
		.ql-editor pre,
		.ql-editor blockquote,
		.ql-editor h1,
		.ql-editor h2,
		.ql-editor h3,
		.ql-editor h4,
		.ql-editor h5,
		.ql-editor h6 {
			margin: 0;
			padding: 0;
			counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
		}

		.ql-editor ol,
		.ql-editor ul {
			padding-left: 1.5em;
		}

		.ql-editor ol>li,
		.ql-editor ul>li {
			list-style-type: none;
		}

		.ql-editor ul>li::before {
			content: '\2022';
		}

		.ql-editor ul[data-checked=true],
		.ql-editor ul[data-checked=false] {
			pointer-events: none;
		}

		.ql-editor ul[data-checked=true]>li *,
		.ql-editor ul[data-checked=false]>li * {
			pointer-events: all;
		}

		.ql-editor ul[data-checked=true]>li::before,
		.ql-editor ul[data-checked=false]>li::before {
			color: #777;
			cursor: pointer;
			pointer-events: all;
		}

		.ql-editor ul[data-checked=true]>li::before {
			content: '\2611';
		}

		.ql-editor ul[data-checked=false]>li::before {
			content: '\2610';
		}

		.ql-editor li::before {
			display: inline-block;
			white-space: nowrap;
			width: 1.2em;
		}

		.ql-editor li:not(.ql-direction-rtl)::before {
			margin-left: -1.5em;
			margin-right: 0.3em;
			text-align: right;
		}

		.ql-editor li.ql-direction-rtl::before {
			margin-left: 0.3em;
			margin-right: -1.5em;
		}

		.ql-editor ol li:not(.ql-direction-rtl),
		.ql-editor ul li:not(.ql-direction-rtl) {
			padding-left: 1.5em;
		}

		.ql-editor ol li.ql-direction-rtl,
		.ql-editor ul li.ql-direction-rtl {
			padding-right: 1.5em;
		}

		.ql-editor ol li {
			counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
			counter-increment: list-0;
		}

		.ql-editor ol li:before {
			content: counter(list-0, decimal) '. ';
		}

		.ql-editor ol li.ql-indent-1 {
			counter-increment: list-1;
		}

		.ql-editor ol li.ql-indent-1:before {
			content: counter(list-1, lower-alpha) '. ';
		}

		.ql-editor ol li.ql-indent-1 {
			counter-reset: list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
		}

		.ql-editor ol li.ql-indent-2 {
			counter-increment: list-2;
		}

		.ql-editor ol li.ql-indent-2:before {
			content: counter(list-2, lower-roman) '. ';
		}

		.ql-editor ol li.ql-indent-2 {
			counter-reset: list-3 list-4 list-5 list-6 list-7 list-8 list-9;
		}

		.ql-editor ol li.ql-indent-3 {
			counter-increment: list-3;
		}

		.ql-editor ol li.ql-indent-3:before {
			content: counter(list-3, decimal) '. ';
		}

		.ql-editor ol li.ql-indent-3 {
			counter-reset: list-4 list-5 list-6 list-7 list-8 list-9;
		}

		.ql-editor ol li.ql-indent-4 {
			counter-increment: list-4;
		}

		.ql-editor ol li.ql-indent-4:before {
			content: counter(list-4, lower-alpha) '. ';
		}

		.ql-editor ol li.ql-indent-4 {
			counter-reset: list-5 list-6 list-7 list-8 list-9;
		}

		.ql-editor ol li.ql-indent-5 {
			counter-increment: list-5;
		}

		.ql-editor ol li.ql-indent-5:before {
			content: counter(list-5, lower-roman) '. ';
		}

		.ql-editor ol li.ql-indent-5 {
			counter-reset: list-6 list-7 list-8 list-9;
		}

		.ql-editor ol li.ql-indent-6 {
			counter-increment: list-6;
		}

		.ql-editor ol li.ql-indent-6:before {
			content: counter(list-6, decimal) '. ';
		}

		.ql-editor ol li.ql-indent-6 {
			counter-reset: list-7 list-8 list-9;
		}

		.ql-editor ol li.ql-indent-7 {
			counter-increment: list-7;
		}

		.ql-editor ol li.ql-indent-7:before {
			content: counter(list-7, lower-alpha) '. ';
		}

		.ql-editor ol li.ql-indent-7 {
			counter-reset: list-8 list-9;
		}

		.ql-editor ol li.ql-indent-8 {
			counter-increment: list-8;
		}

		.ql-editor ol li.ql-indent-8:before {
			content: counter(list-8, lower-roman) '. ';
		}

		.ql-editor ol li.ql-indent-8 {
			counter-reset: list-9;
		}

		.ql-editor ol li.ql-indent-9 {
			counter-increment: list-9;
		}

		.ql-editor ol li.ql-indent-9:before {
			content: counter(list-9, decimal) '. ';
		}

		.ql-editor .ql-indent-1:not(.ql-direction-rtl) {
			padding-left: 3em;
		}

		.ql-editor li.ql-indent-1:not(.ql-direction-rtl) {
			padding-left: 4.5em;
		}

		.ql-editor .ql-indent-1.ql-direction-rtl.ql-align-right {
			padding-right: 3em;
		}

		.ql-editor li.ql-indent-1.ql-direction-rtl.ql-align-right {
			padding-right: 4.5em;
		}

		.ql-editor .ql-indent-2:not(.ql-direction-rtl) {
			padding-left: 6em;
		}

		.ql-editor li.ql-indent-2:not(.ql-direction-rtl) {
			padding-left: 7.5em;
		}

		.ql-editor .ql-indent-2.ql-direction-rtl.ql-align-right {
			padding-right: 6em;
		}

		.ql-editor li.ql-indent-2.ql-direction-rtl.ql-align-right {
			padding-right: 7.5em;
		}

		.ql-editor .ql-indent-3:not(.ql-direction-rtl) {
			padding-left: 9em;
		}

		.ql-editor li.ql-indent-3:not(.ql-direction-rtl) {
			padding-left: 10.5em;
		}

		.ql-editor .ql-indent-3.ql-direction-rtl.ql-align-right {
			padding-right: 9em;
		}

		.ql-editor li.ql-indent-3.ql-direction-rtl.ql-align-right {
			padding-right: 10.5em;
		}

		.ql-editor .ql-indent-4:not(.ql-direction-rtl) {
			padding-left: 12em;
		}

		.ql-editor li.ql-indent-4:not(.ql-direction-rtl) {
			padding-left: 13.5em;
		}

		.ql-editor .ql-indent-4.ql-direction-rtl.ql-align-right {
			padding-right: 12em;
		}

		.ql-editor li.ql-indent-4.ql-direction-rtl.ql-align-right {
			padding-right: 13.5em;
		}

		.ql-editor .ql-indent-5:not(.ql-direction-rtl) {
			padding-left: 15em;
		}

		.ql-editor li.ql-indent-5:not(.ql-direction-rtl) {
			padding-left: 16.5em;
		}

		.ql-editor .ql-indent-5.ql-direction-rtl.ql-align-right {
			padding-right: 15em;
		}

		.ql-editor li.ql-indent-5.ql-direction-rtl.ql-align-right {
			padding-right: 16.5em;
		}

		.ql-editor .ql-indent-6:not(.ql-direction-rtl) {
			padding-left: 18em;
		}

		.ql-editor li.ql-indent-6:not(.ql-direction-rtl) {
			padding-left: 19.5em;
		}

		.ql-editor .ql-indent-6.ql-direction-rtl.ql-align-right {
			padding-right: 18em;
		}

		.ql-editor li.ql-indent-6.ql-direction-rtl.ql-align-right {
			padding-right: 19.5em;
		}

		.ql-editor .ql-indent-7:not(.ql-direction-rtl) {
			padding-left: 21em;
		}

		.ql-editor li.ql-indent-7:not(.ql-direction-rtl) {
			padding-left: 22.5em;
		}

		.ql-editor .ql-indent-7.ql-direction-rtl.ql-align-right {
			padding-right: 21em;
		}

		.ql-editor li.ql-indent-7.ql-direction-rtl.ql-align-right {
			padding-right: 22.5em;
		}

		.ql-editor .ql-indent-8:not(.ql-direction-rtl) {
			padding-left: 24em;
		}

		.ql-editor li.ql-indent-8:not(.ql-direction-rtl) {
			padding-left: 25.5em;
		}

		.ql-editor .ql-indent-8.ql-direction-rtl.ql-align-right {
			padding-right: 24em;
		}

		.ql-editor li.ql-indent-8.ql-direction-rtl.ql-align-right {
			padding-right: 25.5em;
		}

		.ql-editor .ql-indent-9:not(.ql-direction-rtl) {
			padding-left: 27em;
		}

		.ql-editor li.ql-indent-9:not(.ql-direction-rtl) {
			padding-left: 28.5em;
		}

		.ql-editor .ql-indent-9.ql-direction-rtl.ql-align-right {
			padding-right: 27em;
		}

		.ql-editor li.ql-indent-9.ql-direction-rtl.ql-align-right {
			padding-right: 28.5em;
		}

		.ql-editor .ql-video {
			display: block;
			max-width: 100%;
		}

		.ql-editor .ql-video.ql-align-center {
			margin: 0 auto;
		}

		.ql-editor .ql-video.ql-align-right {
			margin: 0 0 0 auto;
		}

		.ql-editor .ql-bg-black {
			background-color: #000;
		}

		.ql-editor .ql-bg-red {
			background-color: #e60000;
		}

		.ql-editor .ql-bg-orange {
			background-color: #f90;
		}

		.ql-editor .ql-bg-yellow {
			background-color: #ff0;
		}

		.ql-editor .ql-bg-green {
			background-color: #008a00;
		}

		.ql-editor .ql-bg-blue {
			background-color: #06c;
		}

		.ql-editor .ql-bg-purple {
			background-color: #93f;
		}

		.ql-editor .ql-color-white {
			color: #fff;
		}

		.ql-editor .ql-color-red {
			color: #e60000;
		}

		.ql-editor .ql-color-orange {
			color: #f90;
		}

		.ql-editor .ql-color-yellow {
			color: #ff0;
		}

		.ql-editor .ql-color-green {
			color: #008a00;
		}

		.ql-editor .ql-color-blue {
			color: #06c;
		}

		.ql-editor .ql-color-purple {
			color: #93f;
		}

		.ql-editor .ql-font-serif {
			font-family: Georgia, Times New Roman, serif;
		}

		.ql-editor .ql-font-monospace {
			font-family: Monaco, Courier New, monospace;
		}

		.ql-editor .ql-size-small {
			font-size: 0.75em;
		}

		.ql-editor .ql-size-large {
			font-size: 1.5em;
		}

		.ql-editor .ql-size-huge {
			font-size: 2.5em;
		}

		.ql-editor .ql-direction-rtl {
			direction: rtl;
			text-align: inherit;
		}

		.ql-editor .ql-align-center {
			text-align: center;
		}

		.ql-editor .ql-align-justify {
			text-align: justify;
		}

		.ql-editor .ql-align-right {
			text-align: right;
		}

		.ql-editor.ql-blank::before {
			color: rgba(0, 0, 0, 0.6);
			content: attr(data-placeholder);
			font-style: italic;
			left: 15px;
			pointer-events: none;
			position: absolute;
			right: 15px;
		}

		.ql-snow.ql-toolbar:after,
		.ql-snow .ql-toolbar:after {
			clear: both;
			content: '';
			display: table;
		}

		.ql-snow.ql-toolbar button,
		.ql-snow .ql-toolbar button {
			background: none;
			border: none;
			cursor: pointer;
			display: inline-block;
			float: left;
			height: 24px;
			padding: 3px 5px;
			width: 28px;
			margin-left: 1px;
			margin-right: 1px;
		}

		.ql-snow.ql-toolbar button svg,
		.ql-snow .ql-toolbar button svg {
			float: left;
			height: 100%;
		}

		.ql-snow.ql-toolbar button:active:hover,
		.ql-snow .ql-toolbar button:active:hover {
			outline: none;
		}

		.ql-snow.ql-toolbar input.ql-image[type=file],
		.ql-snow .ql-toolbar input.ql-image[type=file] {
			display: none;
		}

		.ql-snow.ql-toolbar button:hover,
		.ql-snow .ql-toolbar button:hover,
		.ql-snow.ql-toolbar button:focus,
		.ql-snow .ql-toolbar button:focus,
		.ql-snow.ql-toolbar .ql-picker-label:hover,
		.ql-snow .ql-toolbar .ql-picker-label:hover,
		.ql-snow.ql-toolbar .ql-picker-item:hover,
		.ql-snow .ql-toolbar .ql-picker-item:hover {
			background-color: #f3f4f6;
		}

		.ql-snow.ql-toolbar button.ql-active,
		.ql-snow .ql-toolbar button.ql-active,
		.ql-snow.ql-toolbar .ql-picker-label.ql-active,
		.ql-snow .ql-toolbar .ql-picker-label.ql-active,
		.ql-snow.ql-toolbar .ql-picker-item.ql-selected,
		.ql-snow .ql-toolbar .ql-picker-item.ql-selected {
			background-color: #dbeafe;
			color: #2563eb;
		}

		.ql-snow.ql-toolbar button.ql-active .ql-fill,
		.ql-snow .ql-toolbar button.ql-active .ql-fill,
		.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill,
		.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-fill,
		.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill,
		.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-fill,
		.ql-snow.ql-toolbar button.ql-active .ql-stroke.ql-fill,
		.ql-snow .ql-toolbar button.ql-active .ql-stroke.ql-fill,
		.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,
		.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,
		.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill,
		.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill {
			fill: #2563eb;
		}

		.ql-snow.ql-toolbar button.ql-active .ql-stroke,
		.ql-snow .ql-toolbar button.ql-active .ql-stroke,
		.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke,
		.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke,
		.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
		.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
		.ql-snow.ql-toolbar button.ql-active .ql-stroke-miter,
		.ql-snow .ql-toolbar button.ql-active .ql-stroke-miter,
		.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
		.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
		.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,
		.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter {
			stroke: #2563eb;
		}

		@media (pointer: coarse) {

			.ql-snow.ql-toolbar button:hover:not(.ql-active),
			.ql-snow .ql-toolbar button:hover:not(.ql-active) {
				color: #4b5563;
			}

			.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-fill,
			.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-fill,
			.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill,
			.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill {
				fill: #4b5563;
			}

			.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke,
			.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke,
			.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter,
			.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter {
				stroke: #4b5563;
			}
		}

		.ql-snow {
			box-sizing: border-box;
		}

		.ql-snow * {
			box-sizing: border-box;
		}

		.ql-snow .ql-hidden {
			display: none;
		}

		.ql-snow .ql-out-bottom,
		.ql-snow .ql-out-top {
			visibility: hidden;
		}

		.ql-snow .ql-tooltip {
			position: absolute;
			transform: translateY(10px);
		}

		.ql-snow .ql-tooltip a {
			cursor: pointer;
			text-decoration: none;
		}

		.ql-snow .ql-tooltip.ql-flip {
			transform: translateY(-10px);
		}

		.ql-snow .ql-formats {
			display: inline-block;
			vertical-align: middle;
		}

		.ql-snow .ql-formats:after {
			clear: both;
			content: '';
			display: table;
		}

		.ql-snow .ql-stroke {
			fill: none;
			stroke: #4b5563;
			stroke-linecap: round;
			stroke-linejoin: round;
			stroke-width: 2;
		}

		.ql-snow .ql-stroke-miter {
			fill: none;
			stroke: #4b5563;
			stroke-miterlimit: 10;
			stroke-width: 2;
		}

		.ql-snow .ql-fill,
		.ql-snow .ql-stroke.ql-fill {
			fill: #4b5563;
		}

		.ql-snow .ql-empty {
			fill: none;
		}

		.ql-snow .ql-even {
			fill-rule: evenodd;
		}

		.ql-snow .ql-thin,
		.ql-snow .ql-stroke.ql-thin {
			stroke-width: 1;
		}

		.ql-snow .ql-transparent {
			opacity: 0.4;
		}

		.ql-snow .ql-direction svg:last-child {
			display: none;
		}

		.ql-snow .ql-direction.ql-active svg:last-child {
			display: inline;
		}

		.ql-snow .ql-direction.ql-active svg:first-child {
			display: none;
		}

		.ql-snow .ql-editor h1 {
			font-size: 2em;
		}

		.ql-snow .ql-editor h2 {
			font-size: 1.5em;
		}

		.ql-snow .ql-editor h3 {
			font-size: 1.17em;
		}

		.ql-snow .ql-editor h4 {
			font-size: 1em;
		}

		.ql-snow .ql-editor h5 {
			font-size: 0.83em;
		}

		.ql-snow .ql-editor h6 {
			font-size: 0.67em;
		}

		.ql-snow .ql-editor a {
			text-decoration: underline;
		}

		.ql-snow .ql-editor blockquote {
			border-left: 4px solid #ccc;
			margin-bottom: 5px;
			margin-top: 5px;
			padding-left: 16px;
		}

		.ql-snow .ql-editor code,
		.ql-snow .ql-editor pre {
			background-color: #f0f0f0;
			border-radius: 3px;
		}

		.ql-snow .ql-editor pre {
			white-space: pre-wrap;
			margin-bottom: 5px;
			margin-top: 5px;
			padding: 5px 10px;
		}

		.ql-snow .ql-editor code {
			font-size: 85%;
			padding: 2px 4px;
		}

		.ql-snow .ql-editor pre.ql-syntax {
			background-color: #23241f;
			color: #f8f8f2;
			overflow: visible;
		}

		.ql-snow .ql-editor img {
			max-width: 100%;
		}

		.ql-snow .ql-picker {
			color: #4b5563;
			display: inline-block;
			float: left;
			font-size: 14px;
			font-weight: 500;
			height: 24px;
			position: relative;
			vertical-align: middle;
			margin-right: 1px;
			margin-left: 1px;
		}

		.ql-snow .ql-picker-label {
			cursor: pointer;
			display: flex;
			height: 100%;
			padding-left: 8px;
			padding-right: 2px;
			position: relative;
			width: 100%;
		}

		.ql-snow .ql-picker-label::before {
			display: inline-block;
			line-height: 22px;
		}

		.ql-snow .ql-picker-options {
			background-color: #fff;
			display: none;
			min-width: 100%;
			position: absolute;
			white-space: nowrap;
		}

		.ql-snow .ql-picker-options .ql-picker-item {
			cursor: pointer;
			display: block;
			padding: 5px 8px;
		}

		.ql-snow .ql-picker.ql-expanded .ql-picker-label {
			color: #d1d5db;
			z-index: 2;
		}

		.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill {
			fill: #d1d5db;
		}

		.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke {
			stroke: #d1d5db;
		}

		.ql-snow .ql-picker.ql-expanded .ql-picker-options {
			display: block;
			margin-top: -1px;
			top: 100%;
			z-index: 1;
		}

		.ql-snow .ql-color-picker,
		.ql-snow .ql-icon-picker {
			width: 28px;
		}

		.ql-snow .ql-color-picker .ql-picker-label,
		.ql-snow .ql-icon-picker .ql-picker-label {
			padding: 2px 4px;
		}

		.ql-snow .ql-color-picker .ql-picker-label svg,
		.ql-snow .ql-icon-picker .ql-picker-label svg {
			right: 4px;
		}

		.ql-snow .ql-icon-picker .ql-picker-options {
			padding: 3px;
		}

		.ql-snow .ql-icon-picker .ql-picker-item {
			height: 24px;
			width: 24px;
			padding: 2px 4px;
			margin: 2px;
		}

		.ql-snow .ql-color-picker .ql-picker-options {
			padding: 3px 5px;
			width: 152px;
		}

		.ql-snow .ql-color-picker .ql-picker-item {
			border: 1px solid transparent;
			float: left;
			height: 16px;
			margin: 2px;
			padding: 0px;
			width: 16px;
		}

		.ql-snow .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) svg {
			position: absolute;
			margin-top: -9px;
			right: 0;
			top: 50%;
			width: 18px;
		}

		.ql-snow .ql-picker.ql-header .ql-picker-label[data-label]:not([data-label=''])::before,
		.ql-snow .ql-picker.ql-font .ql-picker-label[data-label]:not([data-label=''])::before,
		.ql-snow .ql-picker.ql-size .ql-picker-label[data-label]:not([data-label=''])::before,
		.ql-snow .ql-picker.ql-header .ql-picker-item[data-label]:not([data-label=''])::before,
		.ql-snow .ql-picker.ql-font .ql-picker-item[data-label]:not([data-label=''])::before,
		.ql-snow .ql-picker.ql-size .ql-picker-item[data-label]:not([data-label=''])::before {
			content: attr(data-label);
		}

		.ql-snow .ql-picker.ql-header {
			width: 98px;
		}

		.ql-snow .ql-picker.ql-header .ql-picker-label::before,
		.ql-snow .ql-picker.ql-header .ql-picker-item::before {
			content: 'Normal';
		}

		.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
		.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
			content: 'Heading 1';
		}

		.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
		.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
			content: 'Heading 2';
		}

		.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
		.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
			content: 'Heading 3';
		}

		.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
		.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
			content: 'Heading 4';
		}

		.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
		.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
			content: 'Heading 5';
		}

		.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
		.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
			content: 'Heading 6';
		}

		.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
			font-size: 2em;
		}

		.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
			font-size: 1.5em;
		}

		.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
			font-size: 1.17em;
		}

		.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
			font-size: 1em;
		}

		.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
			font-size: 0.83em;
		}

		.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
			font-size: 0.67em;
		}

		.ql-snow .ql-picker.ql-font {
			width: 108px;
		}

		.ql-snow .ql-picker.ql-font .ql-picker-label::before,
		.ql-snow .ql-picker.ql-font .ql-picker-item::before {
			content: 'Sans Serif';
		}

		.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=serif]::before,
		.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before {
			content: 'Serif';
		}

		.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=monospace]::before,
		.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before {
			content: 'Monospace';
		}

		.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before {
			font-family: Georgia, Times New Roman, serif;
		}

		.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before {
			font-family: Monaco, Courier New, monospace;
		}

		.ql-snow .ql-picker.ql-size {
			width: 98px;
		}

		.ql-snow .ql-picker.ql-size .ql-picker-label::before,
		.ql-snow .ql-picker.ql-size .ql-picker-item::before {
			content: 'Normal';
		}

		.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=small]::before,
		.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before {
			content: 'Small';
		}

		.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=large]::before,
		.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before {
			content: 'Large';
		}

		.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=huge]::before,
		.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before {
			content: 'Huge';
		}

		.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before {
			font-size: 10px;
		}

		.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before {
			font-size: 18px;
		}

		.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before {
			font-size: 32px;
		}

		.ql-snow .ql-color-picker.ql-background .ql-picker-item {
			background-color: #fff;
		}

		.ql-snow .ql-color-picker.ql-color .ql-picker-item {
			background-color: #000;
		}

		.ql-toolbar.ql-snow {
			border: 1px solid #d1d5db;
			box-sizing: border-box;
			font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
			padding: 8px;
		}

		.ql-toolbar.ql-snow .ql-formats {
			margin-right: 15px;
		}

		.ql-toolbar.ql-snow .ql-picker-label {
			border: 1px solid transparent;
		}

		.ql-toolbar.ql-snow .ql-picker-options {
			border: 1px solid transparent;
			box-shadow: rgba(0, 0, 0, 0.2) 0 2px 8px;
		}

		.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label {
			border-color: #d1d5db;
		}

		.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
			border-color: #d1d5db;
		}

		.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item.ql-selected,
		.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item:hover {
			border-color: #000;
		}

		.ql-toolbar.ql-snow+.ql-container.ql-snow {
			border-top: 0px;
		}

		.ql-snow .ql-tooltip {
			background-color: #fff;
			border: 1px solid #d1d5db;
			box-shadow: 0px 0px 5px #d1d5db;
			color: #4b5563;
			padding: 5px 12px;
			white-space: nowrap;
		}

		.ql-snow .ql-tooltip::before {
			content: "Visit URL:";
			line-height: 26px;
			margin-right: 8px;
		}

		.ql-snow .ql-tooltip input[type=text] {
			display: none;
			border: 1px solid #d1d5db;
			font-size: 13px;
			height: 26px;
			margin: 0px;
			padding: 3px 5px;
			width: 170px;
		}

		.ql-snow .ql-tooltip a.ql-preview {
			display: inline-block;
			max-width: 200px;
			overflow-x: hidden;
			text-overflow: ellipsis;
			vertical-align: top;
		}

		.ql-snow .ql-tooltip a.ql-action::after {
			border-right: 1px solid #d1d5db;
			content: 'Edit';
			margin-left: 16px;
			padding-right: 8px;
		}

		.ql-snow .ql-tooltip a.ql-remove::before {
			content: 'Remove';
			margin-left: 8px;
		}

		.ql-snow .ql-tooltip a {
			line-height: 26px;
		}

		.ql-snow .ql-tooltip.ql-editing a.ql-preview,
		.ql-snow .ql-tooltip.ql-editing a.ql-remove {
			display: none;
		}

		.ql-snow .ql-tooltip.ql-editing input[type=text] {
			display: inline-block;
		}

		.ql-snow .ql-tooltip.ql-editing a.ql-action::after {
			border-right: 0px;
			content: 'Save';
			padding-right: 0px;
		}

		.ql-snow .ql-tooltip[data-mode=link]::before {
			content: "Enter link:";
		}

		.ql-snow .ql-tooltip[data-mode=formula]::before {
			content: "Enter formula:";
		}

		.ql-snow .ql-tooltip[data-mode=video]::before {
			content: "Enter video:";
		}

		.ql-snow a {
			color: #2563eb;
		}

		.ql-container.ql-snow {
			border: 1px solid #d1d5db;
		}



	}
</style>